<template>
	<div class="home">
		<!-- 用户信息 -->
		<el-row :gutter="15">
			<el-col :md="24" :lg="16" :xl="16" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>{{ $t('message.card.title1') }}</span>
					</div>
					<div class="user-item">
						<div class="user-item-left">
							<img src="./food3.jpg" />
						</div>
						<div class="user-item-right overflow">
							<el-row>
								<el-col :span="24" class="right-title mb15 one-text-overflow"
									>{{ currentTime }}，{{ getUserInfos.userName }}，{{ dailyMessage }}
								</el-col>
								<el-col :span="24">
									<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
										<div class="right-label">昵称：</div>
										<div class="right-value">李林雨</div>
									</el-col>
									<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
										<div class="right-label">身份：</div>
										<div class="right-value">{{ userInfo.userName === 'admin' ? '超级管理' : '普通用户' }}</div>
									</el-col>
								</el-col>
								<el-col :span="24" class="mt5">
									<el-col :xs="12" :sm="12" :md="8" class="right-l-v">
										<div class="right-label one-text-overflow">IP：</div>
										<div class="right-value one-text-overflow">162.14.107.118</div>
									</el-col>
									<el-col :xs="12" :sm="12" :md="16" class="right-l-v">
										<div class="right-label one-text-overflow">时间：</div>
										<div class="right-value one-text-overflow">{{ userInfo.time }}</div>
									</el-col>
								</el-col>
								<el-col :span="24" class="mt15">
									<el-button size="small" icon="el-icon-edit-outline" @click="excelAddMoney()">excel导出充值记录 </el-button>
									<el-button size="small" icon="el-icon-position" type="primary" @click="excelOrder()">excel导出订单记录</el-button>
								</el-col>
							</el-row>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :md="24" :lg="8" :xl="8" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>消息通知</span>
						<!-- <span>{{ $t('message.card.title2') }}</span> -->
						<!-- 消息通知 -->
						<el-button class="home-card-more" type="text" >{{ $t('message.card.title3') }}</el-button>
					</div>
					<div class="info">
						<Scroll :data="newsInfoList" class="info-scroll" :class-option="optionSingleHeight">
							<ul class="info-ul">
								<li v-for="(v, k) in newsInfoList" :key="k" class="info-item" @click="onNewsInfoListClick(v)">
									<div class="info-item-left" v-text="v.title"></div>
									<div class="info-item-right" v-text="v.date"></div>
								</li>
							</ul>
						</Scroll>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 推荐 -->
		<el-card shadow="hover">
			<div slot="header">
				<!-- <span>{{ $t('message.card.title4') }}</span> -->
				<span>店铺分析</span>
				<el-button class="home-card-more" type="text" >更多</el-button>
			</div>
			<el-row :gutter="15" class="home-recommend-row">
				<el-col :sm="24" :md="12" :lg="6" :xl="6" v-for="(v, k) in recommendList" :key="k">
					<div class="home-recommend" :style="{ 'background-color': v.bg }">
						<i :class="v.icon" :style="{ color: v.iconColor }"></i>
						<div class="home-recommend-auto">
							<div>{{ v.title }}</div>
							<div class="home-recommend-msg" style="text-align: center;">{{ v.msg }}</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</el-card>

		<!-- charts -->
		<el-row :gutter="15" class="mt15">
			<el-col :md="24" :lg="8" :xl="8" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>今日订单情况</span>
						<!-- <span>{{ $t('message.card.title6') }}</span> -->
					</div>
					<div class="charts">
						<div class="charts-right">
							<div ref="homeStockRef" class="h100"></div>
						</div>
					</div>
				</el-card>
			</el-col>
			
			<el-col :md="24" :lg="16" :xl="16" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>热销菜品</span>
						<!-- 热销菜品 -->
						<!-- <span>{{ $t('message.card.title7') }}</span> -->
					</div>
					<div class="charts">
						<div class="charts-left mr7">
							<div ref="homeLaboratoryRef" class="h100"></div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- v-charts -->
		<el-row :gutter="15">
			<el-col :md="24" :lg="16" :xl="16" class="home-lg">
				<el-card shadow="hover">
					<div slot="header">
						<span>每月利润</span>
						<!-- <span>{{ $t('message.card.title8') }}</span> -->
					</div>
					<div class="charts">
						<div class="charts-left mr7">
							<div ref="homeOvertimeRef" class="h100"></div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :md="24" :lg="8" :xl="8">
				<el-card shadow="hover">
					<div slot="header">
						<!-- <span>{{ $t('message.card.title9') }}</span>
						 -->
						 <p>订单数</p>
						 
					</div>
					<!-- 已完成的订单，按照年月日 -->
					<div class="home-charts">
						<div class="home-charts-item" v-for="(v, k) in finshedOrder" :key="k">
							<div class="home-charts-item-left">
								<div class="home-charts-item-title">{{ v.title }}</div>
								<div class="home-charts-item-num" :style="{ color: v.color }" >{{ v.num }}</div>
								<!-- <div class="home-charts-item-title">{{ v.title }}</div> -->
								<!-- <div class="home-charts-item-num" :style="{ color: v.color }" :id="`titleNum${k + 1}`"></div> -->
							</div>
				
							<div class="home-charts-item-right">
								<i class="el-icon-document" :style="{ 'background-color': '#C3E9FE', color: '#1890FF' }"></i>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import Scroll from 'vue-seamless-scroll';
import { CountUp } from 'countup.js';
import { Session } from '@/utils/storage';
import { formatAxis, formatDate } from '@/utils/formatTime';
import { recommendList, chartsRightList, newsInfoList, dailyMessage } from './mock';
import axios  from 'axios';
export default {
	name: 'home',
	components: { Scroll },
	data() {
		return {
			recommendList,
			chartsRightList,
			newsInfoList,
			userInfo: {},
			dailyMessage: {},
			finshedOrder:[{
					title:"今年已完成订单",
					num:0
				},{
					title:"本月已完成订单",
					num:0
				},{
					title:"今天已完成订单",
					num:0
				}
			],
			requesturl:"http://162.14.107.118:8086/",//axios请求地址
			nowdaynum:[{}],
			orderState:[0,0,0],//获取
		};
	},
	created() {
		this.initUserInfo();
		this.initDailyMessage();
	},
	computed: {
		currentTime() {
			return formatAxis(new Date());
		},
		optionSingleHeight() {
			return {
				singleHeight: 28,
				limitMoveNum: 8,
				waitTime: 2000,
			};
		},
		getUserInfos() {
			return this.$store.state.userInfos.userInfos;
		},
	},
	mounted() {
		//店铺设置
		this.setStory();

		//PC得到完成的订单数
		this.getFinshOrder();

		//PC得到今天的订单情况
		this.getNowDayOrderState();

		//PC得到卖的最多的六个产品
		this.getTopFoodName();

		//PC得到月份营业额 月份订单数
		this.getMonthMoney();

		// this.initHomeStock();//当天订单状态图表
		// this.initHomeLaboratory();//echar食品排行
		// this.initHomeOvertime();//第三个echar月份的主食
		this.initNumCountUp();
		
		
	},
	methods: {
		//设置店铺分析 配合有段线程池优化
		setStory(){
			axios.get(this.requesturl+"PC/getStoryByThread").then(res=>{
					this.recommendList[0].msg=res.data.data[0] //用户数
					this.recommendList[1].msg=res.data.data[3] //现金流
					this.recommendList[2].msg=res.data.data[2] //订单数
					this.recommendList[3].msg=res.data.data[1] //菜品数
				})

		},
		//excel导出订单
		excelOrder(){

			window.open(this.requesturl+"PC/exportExcelFood")
			// axios.get(this.requesturl+"PC/exportExcelFood")
		},

		//excel导出充值记录
		excelAddMoney(){

			window.open(this.requesturl+"PC/exportExcelAddMoney")
			// axios.get(this.requesturl+"PC/exportExcelAddMoney")
		},

		//PC获得当前完成订单
		getFinshOrder(){
			axios.get(this.requesturl+"PC/getOrderFinshed").then(res=>{

				this.finshedOrder[0].num=res.data.data[0]
				this.finshedOrder[1].num=res.data.data[1]
				this.finshedOrder[2].num=res.data.data[2]
			})

		},
		//PC获得今天的订单情况
		getNowDayOrderState(){
			axios.get(this.requesturl+"PC/CountOrderState").then(res=>{
				
				this.orderState=res.data.data
				
				const myChart = echarts.init(this.$refs.homeStockRef);
				const option = {
					grid: {
						top: 50,
						right: 20,
						bottom: 30,
						left: 30,
					},
					tooltip: {
						trigger: 'item',
					},
					legend: {
						left: 'center',
					},
					series: [
						{
							name: '订单详情',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 10,
								borderColor: '#fff',
								borderWidth: 2,
							},
							data: [
								{ value: this.orderState[0], name: '顾客下单' },
								{ value: this.orderState[1], name: '商家接单' },
								{ value: this.orderState[2], name: '顾客付款' },
							],
								top: 30,
							},
						],
					};
					myChart.setOption(option);
					window.addEventListener('resize', () => {
						myChart.resize();
					});

			})
		},
		//PC获得热销菜品
		getTopFoodName(){
			axios.get(this.requesturl+"PC/getTopFood").then(res=>{
				let foodnameArr=[]
				let foodcountArr=[]
				// console.log(res.data.data);
				res.data.data.forEach(item => {
					foodnameArr.push(item.foodname)
					foodcountArr.push(item.countfood)
				});
				// console.log("打印食品数组",foodnameArr);
				const myChart = echarts.init(this.$refs.homeLaboratoryRef);
				const option = {
					grid: {
						top: 50,
						right: 20,
						bottom: 30,
						left: 30,
					},
					tooltip: {
						trigger: 'axis',
					},
					legend: {
						data: ['最新成交量'],
						right: 13,
					},
					xAxis: {
						data: foodnameArr,
					},
					yAxis: [
						{
							type: 'value',
							name: '数量',
						},
					],
					series: [
						// {
						// 	name: '预购队列',
						// 	type: 'bar',
						// 	data: [5, 20, 36, 10, 10, 20],
						// },
						{
							name: '最新成交量',
							type: 'line',
							data: foodcountArr,
						},
					],
				}
				myChart.setOption(option);
				window.addEventListener('resize', () => {
					myChart.resize();
				});
			})
		},
		//获得每个月的订单和营业额
		getMonthMoney(){
			axios.get(this.requesturl+"PC/getMonthMoney").then(res=>{
				let mo=res.data.data 
				let monthMoney=[]
				let monthOrder=[]
				for (let index = 0; index < mo.length; index++) {
					monthMoney[index] = mo[index].monthMoney
					monthOrder[index] = mo[index].monthOrder
				}
				const myChart = echarts.init(this.$refs.homeOvertimeRef);
			const option = {
				grid: {
					top: 50,
					right: 20,
					bottom: 30,
					left: 30,
				},
				tooltip: {
					trigger: 'axis',
				},
				legend: {
					// data: ['订单数量', '销售额'],
					data: ['销售额'],
					right: 13,
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				},
				yAxis: [
					{
						type: 'value',
						name: '销售额',
						// interval:2000
					},
				],
				series: [
					// {
					// 	name: '订单数量',
					// 	type: 'line',
					// 	data: monthOrder,
					// },
					{
						name: '销售额',
						type: 'bar',
						data: monthMoney,
					},
					
					
				],
			};
				myChart.setOption(option);
				window.addEventListener('resize', () => {
					myChart.resize();
				});
			})
		},
		// 初始化数字滚动
		initNumCountUp() {
			this.$nextTick(() => {
				new CountUp('titleNum1', Math.random() * 100000).start();
				new CountUp('titleNum2', Math.random() * 100000).start();
				new CountUp('titleNum3', Math.random() * 100000).start();
			});
		},
		// 库存作业
		// initHomeStock() {
		// 	const myChart = echarts.init(this.$refs.homeStockRef);
		// 	console.log("打印要存放的",this.orderState);
		// 	const option = {
		// 		grid: {
		// 			top: 50,
		// 			right: 20,
		// 			bottom: 30,
		// 			left: 30,
		// 		},
		// 		tooltip: {
		// 			trigger: 'item',
		// 		},
		// 		legend: {
		// 			left: 'center',
		// 		},
		// 		series: [
		// 			{
		// 				name: '邮件营销',
		// 				type: 'pie',
		// 				radius: ['40%', '70%'],
		// 				avoidLabelOverlap: false,
		// 				itemStyle: {
		// 					borderRadius: 10,
		// 					borderColor: '#fff',
		// 					borderWidth: 2,
		// 				},
		// 				data: [
		// 					{ value: this.orderState[0], name: '顾客下单' },
		// 					{ value: this.orderState[1], name: '商家接单' },
		// 					{ value: this.orderState[2], name: '顾客付款' },
		// 				],
		// 				top: 30,
		// 			},
		// 		],
		// 	};
		// 	myChart.setOption(option);
		// 	window.addEventListener('resize', () => {
		// 		myChart.resize();
		// 	});
		// },

		// 履约情况
		// initHomeLaboratory() {
		// 	const myChart = echarts.init(this.$refs.homeLaboratoryRef);
		// 	const option = {
		// 		grid: {
		// 			top: 50,
		// 			right: 20,
		// 			bottom: 30,
		// 			left: 30,
		// 		},
		// 		tooltip: {
		// 			trigger: 'axis',
		// 		},
		// 		legend: {
		// 			data: ['预购队列', '最新成交价'],
		// 			right: 13,
		// 		},
		// 		xAxis: {
		// 			data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
		// 		},
		// 		yAxis: [
		// 			{
		// 				type: 'value',
		// 				name: '价格',
		// 			},
		// 		],
		// 		series: [
		// 			{
		// 				name: '预购队列',
		// 				type: 'bar',
		// 				data: [5, 20, 36, 10, 10, 20],
		// 			},
		// 			{
		// 				name: '最新成交价',
		// 				type: 'line',
		// 				data: [15, 20, 16, 20, 30, 8],
		// 			},
		// 		],
		// 	};
		// 	myChart.setOption(option);
		// 	window.addEventListener('resize', () => {
		// 		myChart.resize();
		// 	});
		// },
		// 缺货监控
		// initHomeOvertime() {
		// 	const myChart = echarts.init(this.$refs.homeOvertimeRef);
		// 	const option = {
		// 		grid: {
		// 			top: 50,
		// 			right: 20,
		// 			bottom: 30,
		// 			left: 30,
		// 		},
		// 		tooltip: {
		// 			trigger: 'axis',
		// 		},
		// 		legend: {
		// 			data: ['订单数量', '销售额'],
		// 			right: 13,
		// 		},
		// 		xAxis: {
		// 			data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
		// 		},
		// 		yAxis: [
		// 			{
		// 				type: 'value',
		// 				name: '数量',
		// 			},
		// 		],
		// 		series: [
		// 			{
		// 				name: '订单数量',
		// 				type: 'bar',
		// 				data: [5, 20, 36, 10, 10, 20, 11, 13, 10, 9, 17, 19],
		// 			},
		// 			{
		// 				name: '销售额',
		// 				type: 'bar',
		// 				data: [15, 12, 26, 15, 11, 16, 31, 13, 5, 16, 13, 15],
		// 			},
					
					
		// 		],
		// 	};
		// 	myChart.setOption(option);
		// 	window.addEventListener('resize', () => {
		// 		myChart.resize();
		// 	});
		// },
		// 随机语录
		initDailyMessage() {
			this.dailyMessage = dailyMessage[Math.floor(Math.random() * dailyMessage.length)];
		},
		// 初始化登录信息
		initUserInfo() {
			if (!Session.get('userInfo')) return false;
			this.userInfo = Session.get('userInfo');
			this.userInfo.time = formatDate(new Date(this.userInfo.time), 'YYYY-mm-dd HH:MM:SS');
		},
		// 消息通知当前项点击
		onNewsInfoListClick(v) {
			window.open(v.link);
		},
		// 跳转到 gitee
		// onOpenGitee() {
		// 	window.open('https://gitee.com/lyt-top/vue-next-admin');
		// },
		
	},
};
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
